<template>
    <div class="coupon-card"  @click="handleToCoupon">
        <div class="icon-wrap">
            <img
                class="icon"
                src="https://5b0988e595225.cdn.sohucs.com/images/20181013/2a8e78c78c7341c4a384546b8195cabf.jpeg"
                mode="scaleToFill"
            />
        </div>
        <div class="text">你有10张券待使用 &gt;</div>
    </div>
</template>
<script setup >
import { useRouter } from 'vue-router'
const router = useRouter()

const handleToCoupon = () => {
  

    router.push('/mine-coupon')


}
</script>
<style scoped lang="scss">
.coupon-card {
    z-index: 2;
    margin-top: 1rem;
    height: 8rem;
    width: 100%;
    background: #fff;
    border-radius: .8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon-wrap {
        width: 4rem;
        height: 4rem;
        .icon {
            width: 100%;
            height: 100%;
        }
    }
    .text {
        color: #ee984e;
    }
}
</style>